<template>
  <a-table
    :data-source="tableData"
    :pagination="false"
    :scroll="{ x: 1500 }"
    class="checkTable"
  >
    <a-table-column
      key="tenantId"
      data-index="tenantId"
      align="center"
      width="8%"
    >
      <span slot="title">客户编号</span>
      <template slot-scope="text, record">
        {{ record.tenantId }}
      </template>
    </a-table-column>
    <!-- 业务类型 -->
    <a-table-column
      class="businesstype"
      key="businessType"
      data-index="businessType"
      align="center"
      width="8%"
    >
      <span slot="title">业务类型</span>
      <template slot-scope="text, record">
        <span style="margin-right:5px;">{{ record.businessType }}</span>
        <span v-if="record.fastInOut == '1'" class="isfast">快</span>
      </template>
    </a-table-column>
    <!-- 转运标题 -->
    <a-table-column
      key="transferTitle"
      data-index="transferTitle"
      align="center"
      width="10%"
    >
      <span slot="title">转运标题</span>
      <template slot-scope="text, record">
        <span>{{ record.transferTitle }}</span>
      </template>
    </a-table-column>
    <!-- 转运入库编号 -->
    <a-table-column
      key="transferNo"
      data-index="transferNo"
      align="center"
      width="10%"
    >
      <span slot="title">转运入库编号</span>
      <template slot-scope="text, record">
        <span>{{ record.transferNo }}</span>
      </template>
    </a-table-column>
    <!-- 货物信息 -->
    <a-table-column
      key="boxList"
      class="columns-tab"
      data-index="boxList"
      align="center"
      width="20%"
    >
      <div slot="title" class="columns">
        <div>货物编号</div>
        <div>自定义编号</div>
        <div>箱数</div>
      </div>
      <!-- 表格 -->
      <template slot-scope="text, record">
        <ul
          class="boxSkuList-list"
          v-for="item in record.boxList"
          :key="item.key"
        >
          <li>
            {{ item.goodsBoxNo }}
          </li>
          <li>
            {{ item.customBoxNo }}
          </li>
          <li>
            {{ item.boxTotal }}
          </li>
        </ul>
      </template>
    </a-table-column>
    <!-- 入库仓库 -->
    <a-table-column
      key="warehousingId"
      data-index="warehousingId"
      align="center"
      width="8%"
    >
      <span slot="title">入库仓库</span>
      <template slot-scope="text, record">
        <span>{{ record.warehouseName }}</span>
      </template>
    </a-table-column>
    <!-- 创建时间 -->
    <a-table-column
      key="createTime"
      data-index="createTime"
      align="center"
      width="8%"
    >
      <span slot="title">创建时间</span>
      <template slot-scope="text, record">
        <span>{{ record.createTime }}</span>
      </template>
    </a-table-column>
    <!-- 状态 -->
    <a-table-column
      key="auditState"
      data-index="auditState"
      align="center"
      width="7%"
    >
      <span slot="title">状态</span>
      <template slot-scope="text, record">
        <span>{{ record.auditState }}</span>
      </template>
    </a-table-column>
    <!-- 备注 -->
    <a-table-column
      key="remarks"
      data-index="remarks"
      align="center"
      width="12%"
    >
      <span slot="title">备注</span>
      <template slot-scope="text, record">
        <span>{{ record.remarks }}</span>
      </template>
    </a-table-column>
    <!-- 操作 -->
    <a-table-column align="center" width="10%">
      <span slot="title">操作</span>
      <span class="action" slot-scope="text, record">
        <a
          href="javascript:;"
          @click="showModal(record, 'pass')"
          v-if="['待审核', '待发头程'].includes(TransferOutKeys)"
          >审核</a
        >
        <a
          style="margin-right:10px;"
          href="javascript:;"
          @click="showModal(record, 'look', 'order')"
          v-if="
            ['在途中', '已接收', '已入库', '审核不通过'].includes(
              TransferOutKeys
            )
          "
          >订单详情</a
        >
      </span>
    </a-table-column>
  </a-table>
</template>

<script>
export default {
  props: [
    "tableData",
    "TransferOutKeys",
    "getTransferInTableList",
    "getStateCount",
    "isState"
  ],
  data() {
    return {
      SKUTablieData: []
    };
  },
  methods: {
    showModal(record, flag) {
      if (flag === "pass") {
        setTimeout(() => {
          this.$bus.$emit("TransferInRowData1", record, "look", flag, "order");
        }, 1);
      } else if (flag === "look") {
        setTimeout(() => {
          this.$bus.$emit("TransferInRowData1", record, "look", flag, "order");
        }, 1);
      } else if (flag === "read") {
        setTimeout(() => {
          this.$bus.$emit("TransferInRowData1", record, "look", flag);
        }, 1);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.checkTable {
  .isfast {
    display: inline-block;
    background-color: #00bfbf;
    color: #fff;
    height: 24px;
    font-size: 12px;
    width: 24px;
    border: 1px solid #000;
    line-height: 20px;
    border-radius: 12px;
  }
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    display: flex;
    div:nth-child(1) {
      width: 120px;
      text-align: center;
      border: 1px solid #ccc;
    }
    div:nth-child(2) {
      width: 150px;
      text-align: center;
      border: 1px solid #ccc;
    }
    div:nth-child(3) {
      width: 60px;
      text-align: center;
      border: 1px solid #ccc;
    }
  }
}
.boxSkuList-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 3px 0;
  }
  li:nth-child(1) {
    width: 120px;
  }
  li:nth-child(2) {
    width: 150px;
  }
  li:nth-child(3) {
    width: 60px;
  }
}
</style>
